<template>
    <el-row class="min-h-screen">
        <el-col :lg="9" :md="9" class="pug-login-left">
            <h2 class="pug-login-tit">欢迎回来</h2>
            <div class="pug-login-info">
                <span class="pug-line"></span>
                <span>账号密码登录</span>
                <span class="pug-line"></span>
            </div>

            <el-form :model="user" ref="userFormRef" :rules="userLoginRules" class="w-[250px]">
                <el-form-item prop="username">
                    <el-input v-model="user.username" id="username" type="text" placeholder="请输入用户名"  maxlength="20" minlength="3">
                        <template #prepend>
                            <el-icon><User /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="user.password" id="password" placeholder="请输入密码" type="password" maxlength="20" minlength="3">
                      <template #prepend><el-icon><Lock /></el-icon></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="code" class="pug-code-box">
                    <el-input v-model="user.code" id="code" placeholder="请输入验证码" maxlength="4" minlength="4">
                     <template #prepend><el-icon><Lock /></el-icon></template>
                    </el-input>
                    <img :src="captchaData" @click="createCaptcha" class="code" alt="">
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  class="w-[250px]"  @click="handleLoginSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :lg="15" :md="15" class="pug-login-right bg-green-300">
            <div class="text-center">
                <img class="inline" src="@i/img/hero_img.png" alt="">
                <div class="font-bold text-5xl text-light-50 mb-4 mt-9">欢迎光临</div>
                <div class="text-gray-200 text-sm">此站点是《vue3 + vite实战商城后台开发》视频课程的演示地址</div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
    import {useRouter} from "vue-router";
    const user = {"username":"YanLe","password":"140010","code":"11010"};
    const router = useRouter();
    const handleLoginSubmit = ()=>{
      router.push("/");
    }

</script>

<style scope>
.pug-login-left {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*标题设置样式 */
.pug-login-tit {
    @apply font-bold text-3xl text-gray-800;
}

.pug-login-info {
    @apply flex items-center m-5 space-x-3 text-gray-300;
}

/*分割线*/
.pug-line {
    @apply h-[1px] w-16 bg-gray-200 inline-block;
}

.pug-login-right {
    @apply flex items-center justify-center;
}

.pug-code-box {position: relative;}
.pug-code-box .code{
    position: absolute;
    right:0;
    width:86px
}
</style>
